<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>websocket测试</title>
    <style type="text/css">
        h3,h4{
            text-align:center;
        }
    </style>
</head>
<body>
<input id="ip" type="text" value="127.0.0.1:9990" placeholder="服务器地址"/>服务器
<br>
<input id="text" type="text" value="p-admin-100000" placeholder="客户端ID"/>客户端ID
<br>
<button onclick="connect()">connect</button>
<button onclick="connectClose()">close</button>
<button onclick="clearContent()">clear</button>
<div id="message"></div>
<script type="text/javascript">
    let socket = undefined;
    let timer = undefined;
    function connect() {
        if (typeof (WebSocket) == "undefined") {
            console.error("遗憾：您的浏览器不支持WebSocket");
        } else {
            let clientId = document.getElementById('text').value;
            let ip = document.getElementById('ip').value;
            socket = new WebSocket("ws://" + ip + "/websocket/" + clientId);
            //连接打开事件
            socket.onopen = function() {
                console.log("==>连接打开clientId:" + clientId);
                startHeartBeat();
            };
            //收到消息事件
            socket.onmessage = function(message) {
                if (message.data === "0xA") {
                    console.log("<==收到心跳:0xA");
                    return;
                }
                console.log("<==收到消息:" + message.data);
                let h5 = document.createElement("h5");
                h5.innerText = message.data;
                document.getElementById("message").appendChild(h5);
            };
            // 连接关闭事件
            socket.onclose = function() {
                let h5 = document.createElement("h5");
                h5.innerText = "Socket已关闭";
                document.getElementById("message").appendChild(h5);
            };
            //发生了错误事件
            socket.onerror = function() {
                let h5 = document.createElement("h5");
                h5.innerText = "Socket发生了错误";
                document.getElementById("message").appendChild(h5);
                connect();
            };

            //窗口关闭时，关闭连接
            window.unload = function() {
                console.info("window.unload")
                socket.close();
            };
            window.onclose = function() {
                console.info("window.onclose");
            }
        }
    }
    // 关闭连接
    function connectClose() {
        socket.close();
    }
    function clearContent() {
        document.getElementById("message").innerHTML = "";
    }
    function startHeartBeat() {
        timer && clearInterval(timer);
        console.info("开启心跳")
        timer =  window.setInterval(function () {
            // 0 (WebSocket.CONNECTING)
            // 正在链接中
            // 1 (WebSocket.OPEN)
            // 已经链接并且可以通讯
            // 2 (WebSocket.CLOSING)
            // 连接正在关闭
            // 3 (WebSocket.CLOSED)
            // 连接已关闭或者没有链接成功
            if (socket.readyState === 3) {
                console.info("==>重连");
                connect();
                return;
            }
            if (socket.readyState === 1) {
                console.info("==>发送心跳:0x9")
                socket.send("0x9");
            }
        }, 5000)
    }

</script>

</body>
</html>
